<template>
	<view v-if="info">
		<!-- todo 原生导航 不然覆盖不了 -->
		<!-- <u-navbar placeholder fixed autoBack border title="项目详情"></u-navbar> -->
		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex"><view class="d-font-30 d-flex-1" style="color: #151C24;">项目定位</view></view>
				<map
					class="d-m-t-20"
					style="height: 400rpx;width: 100%;"
					:longitude="info.gisjd"
					:latitude="info.giswd"
					:markers="[
						{
							id: '123456',
							icon: '/static/image/qy.png',
							latitude: info.giswd,
							longitude: info.gisjd,
							title: info.xmmc,
							height: 20,
							width: 20
						}
					]"
				></map>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex d-m-b-20"><view class="d-font-30 d-flex-1" style="color: #151C24;">项目信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">项目名称</view>
					<view class="d-p-l-30 d-text-right" style="color: #162233; max-width: 60%;">{{ info.xmmc || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">行业主管部门</view>
					<view style="color: #162233;">{{ info.xmtype || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">项目种类</view>
					<view style="color: #162233;">{{ info.tzlx || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工程进度</view>
					<view style="color: #162233;">{{ info.jsjd || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">所属兵团辖区</view>
					<view style="color: #162233;">{{ info.districtName || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">项目经理</view>
					<view style="color: #162233;">{{ info.constructionxmjlname || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">联系电话</view>
					<view style="color: #162233;">{{ info.constructionxmjllxdh || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同开工日期</view>
					<view style="color: #162233;">{{ info.jhkgsj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同竣工日期</view>
					<view style="color: #162233;">{{ info.jhjgsj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">中标合同价格(工程造价)(万元)</view>
					<view style="color: #162233;">{{ info.ztz || '无数据源' }}</view>
				</view>
				<!-- <view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">项目经理</view>
					<view style="color: #162233;">{{ info.contactname || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工程进度</view>
					<view style="color: #162233;">{{ info.jsjd || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">联系电话</view>
					<view><u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.contactphone || '无数据源'"></u--text></view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">项目属地</view>
					<view style="color: #162233;">{{ info.districtName || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同开工日期</view>
					<view style="color: #162233;">{{ info.jhkgsj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同竣工日期</view>
					<view style="color: #162233;">{{ info.jhjgsj || '无数据源' }}</view>
				</view> -->
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex d-m-b-20"><view class="d-font-30 d-flex-1" style="color: #151C24;">单位信息</view></view>
				<view>
					<u-tabs
						:list="nav"
						:activeStyle="{
							color: '#21A5F3'
						}"
						:current="current"
						@change="e => (current = e.index)"
					></u-tabs>
					<!-- 建设 -->
					<template v-if="current == 0">
						<view class="d-p-30" @click="enterpriseDetail(current, info.buildingid)">
							<view class="d-flex d-font-28" style="color: #151C24;font-weight: bold;">
								<view>单位名称</view>
								<view class="d-flex-1 d-m-l-20 u-line-1">{{ info.buildingname || '无数据源' }}</view>
								<!-- <view>
									<u-button
										text="查看"
										shape="circle"
										size="mini"
										:customStyle="{
											color: '#FFB61D',
											borderColor: '#FFB61D'
										}"
										@click="enterpriseDetail(current, info.buildingleaderid)"
									></u-button>
								</view> -->
							</view>
							<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
								<view>负责人</view>
								<view class="d-flex-1 d-m-l-20" style="color: #162233;">{{ info.buildingleader || '无数据源' }}</view>
							</view>
							<view class="d-flex d-font-24 d-m-t-10" style="color: #5D6672;">
								<view>联系电话</view>
								<view class="d-flex-1 d-m-l-20">
									<u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.buildingleaderphone || '无数据源'"></u--text>
								</view>
							</view>
						</view>
					</template>
					<!-- 勘查 -->
					<template v-else-if="current == 1">
						<view class="d-p-30" @click="enterpriseDetail(current, info.prospectingid)">
							<view class="d-flex d-font-28" style="color: #151C24;font-weight: bold;">
								<view>单位名称</view>
								<view class="d-flex-1 d-m-l-20 u-line-1">{{ info.prospectingname || '无数据源' }}</view>
								<!-- <view>
									<u-button
										text="查看"
										shape="circle"
										size="mini"
										:customStyle="{
											color: '#FFB61D',
											borderColor: '#FFB61D'
										}"
										@click="enterpriseDetail(current, info.prospectingleaderid)"
									></u-button>
								</view> -->
							</view>
							<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
								<view>负责人</view>
								<view class="d-flex-1 d-m-l-20" style="color: #162233;">{{ info.prospectingleader || '无数据源' }}</view>
							</view>
							<view class="d-flex d-font-24 d-m-t-10" style="color: #5D6672;">
								<view>联系电话</view>
								<view class="d-flex-1 d-m-l-20">
									<u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.prospectingleaderphone || '无数据源'"></u--text>
								</view>
							</view>
						</view>
					</template>
					<!-- 总包 -->
					<template v-else-if="current == 2">
						<view class="d-p-30" @click="enterpriseDetail(current, info.constructionId)">
							<view class="d-flex d-font-28" style="color: #151C24;font-weight: bold;">
								<view>单位名称</view>
								<view class="d-flex-1 d-m-l-20 u-line-1">{{ info.constructionName || '无数据源' }}</view>
								<!-- <view>
									<u-button
										text="查看"
										shape="circle"
										size="mini"
										:customStyle="{
											color: '#FFB61D',
											borderColor: '#FFB61D'
										}"
										@click="enterpriseDetail(current, info.constructionId)"
									></u-button>
								</view> -->
							</view>
							<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
								<view>负责人</view>
								<view class="d-flex-1 d-m-l-20" style="color: #162233;">{{ info.constructionLeader || '无数据源' }}</view>
							</view>
							<view class="d-flex d-font-24 d-m-t-10" style="color: #5D6672;">
								<view>联系电话</view>
								<view class="d-flex-1 d-m-l-20">
									<u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.constructionLeaderPhone || '无数据源'"></u--text>
								</view>
							</view>
						</view>
					</template>
					<!-- 监理 -->
					<template v-else-if="current == 3">
						<view class="d-p-30" @click="enterpriseDetail(current, info.supervisionid)">
							<view class="d-flex d-font-28" style="color: #151C24;font-weight: bold;">
								<view>单位名称</view>
								<view class="d-flex-1 d-m-l-20 u-line-1">{{ info.supervisionname || '无数据源' }}</view>
								<!-- <view>
									<u-button
										text="查看"
										shape="circle"
										size="mini"
										:customStyle="{
											color: '#FFB61D',
											borderColor: '#FFB61D'
										}"
										@click="enterpriseDetail(current, info.supervisionid)"
									></u-button>
								</view> -->
							</view>
							<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
								<view>负责人</view>
								<view class="d-flex-1 d-m-l-20" style="color: #162233;">{{ info.supervisionleader || '无数据源' }}</view>
							</view>
							<view class="d-flex d-font-24 d-m-t-10" style="color: #5D6672;">
								<view>联系电话</view>
								<view class="d-flex-1 d-m-l-20">
									<u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.supervisionleaderphone || '无数据源'"></u--text>
								</view>
							</view>
						</view>
					</template>
					<!-- 设计 -->
					<template v-else-if="current == 4">
						<view class="d-p-30" @click="enterpriseDetail(current, info.designid)">
							<view class="d-flex d-font-28" style="color: #151C24;font-weight: bold;">
								<view>单位名称</view>
								<view class="d-flex-1 d-m-l-20 u-line-1">{{ info.designname || '无数据源' }}</view>
								<!-- <view>
									<u-button
										text="查看"
										shape="circle"
										size="mini"
										:customStyle="{
											color: '#FFB61D',
											borderColor: '#FFB61D'
										}"
										@click="enterpriseDetail(current, info.designid)"
									></u-button>
								</view> -->
							</view>
							<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
								<view>负责人</view>
								<view class="d-flex-1 d-m-l-20" style="color: #162233;">{{ info.designleader || '无数据源' }}</view>
							</view>
							<view class="d-flex d-font-24 d-m-t-10" style="color: #5D6672;">
								<view>联系电话</view>
								<view class="d-flex-1 d-m-l-20"><u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.designleaderphone || '无数据源'"></u--text></view>
							</view>
						</view>
					</template>
					<!-- 分包 -->
					<template v-else-if="current == 5">
						<template v-if="subs && subs.length > 0">
							<view class="d-p-30 u-border" v-for="(item, index) in subs" :key="index">
								<view class="d-flex d-font-28" style="color: #151C24;font-weight: bold;">
									<view>单位名称</view>
									<view class="d-flex-1 d-m-l-20 u-line-1">{{ item.fbDwmc || '无数据源' }}</view>
									<view>
										<u-button
											text="查看"
											shape="circle"
											size="mini"
											:customStyle="{
												color: '#FFB61D',
												borderColor: '#FFB61D'
											}"
											@click="enterpriseDetail(current, item.id)"
										></u-button>
									</view>
								</view>
								<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
									<view>负责人</view>
									<view class="d-flex-1 d-m-l-20" style="color: #162233;">{{ item.buildingleader || '无数据源' }}</view>
								</view>
								<view class="d-flex d-font-24 d-m-t-10" style="color: #5D6672;">
									<view>联系电话</view>
									<view class="d-flex-1 d-m-l-20">
										<u--text color="#21A5F3" size="24rpx" mode="phone" call :text="item.buildingleaderphone || '无数据源'"></u--text>
									</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view style="padding: 30rpx;"><u-empty text="暂无分包信息" icon="/static/image/none.png"></u-empty></view>
						</template>
					</template>
				</view>
			</view>
			
			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex d-m-b-20"><view class="d-font-30 d-flex-1" style="color: #151C24;">人工费用拨付信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">人工费用约定合同/协议</view>
					<view style="color: #162233;">{{ info.rgfyydht || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">人工费用(万元)</view>
					<view style="color: #162233;">{{ info.rgfy || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">人工费用占工程款比例(%)</view>
					<view style="color: #162233;">{{ info.rgfybl || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">人工费拨付周期(月)</view>
					<view style="color: #162233;">{{ info.rgfbfzq || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">拨付日期（每月）</view>
					<view style="color: #162233;">{{ info.bfrq || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">拨付方式</view>
					<view style="color: #162233;">{{ info.bffs || '无数据源' }}</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex d-m-b-20"><view class="d-font-30 d-flex-1" style="color: #151C24;">保证金专户信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">保证金缴纳类型</view>
					<view style="color: #162233;">{{ bail ? bail.bailtype : '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">专用账户账号/函号</view>
					<view style="color: #162233;">{{ bail ? bail.account : '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="" style="color: #949AA2;">开户银行</view>
					<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ bail ? bail.banktype : '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">账户余额/保函金额</view>
					<view style="color: #162233;">{{ bail ? bail.balance : '0' }}{{typeof(bail.balance)==Number?'元':''}}</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex d-m-b-20"><view class="d-font-30 d-flex-1" style="color: #151C24;">工资专户信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">专用账户名称</view>
					<view style="color: #162233; ">{{ salary ? salary.zhname : '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">专用账户账号</view>
					<view class="d-p-l-30 d-text-right" style="color: #162233; max-width: 60%; ">{{ salary ? salary.zhmc : '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">开户银行</view>
					<view class="d-p-l-30 d-text-right" style="color: #162233; max-width: 60%;">{{ salary ? salary.khh : '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">账户余额</view>
					<view style="color: #162233;">{{ salary ? salary.zhyeNew : '0' }}元</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30" @click="appTeam">
				<view class="d-flex d-m-b-20"><view class="d-font-30 d-flex-1" style="color: #151C24;">班组统计</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">班组数量</view>
					<view style="color: #21A5F3;">{{ statistics ? statistics.groups : 0 }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">班组总人数</view>
					<view style="color: #162233;">{{ statistics ? statistics.staffs : 0 }}</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">附件</view></view>
				<view class="table">
					<view class="tr">
						<view class="th d-p-l-30">序号</view>
						<view class="th">附件</view>
						<view class="th">数量</view>
					</view>
					<template v-if="atta && atta.length > 0">
						<view class="tr" v-for="(item, index) in atta" :key="index" @click="viewImage(item)">
							<view class="td d-p-l-30">{{ index + 1 }}</view>
							<view class="td u-line-1">
								<text style="color: #21A5F3;">{{ item.attachName }}</text>
							</view>
							<view class="td">{{ item.count }}</view>
						</view>
					</template>
				</view>
				<template v-if="!atta || atta.length <= 0">
					<view class="d-p-30"><u-empty icon="/static/image/none.png" text="暂无附件"></u-empty></view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import { getProjectDetail, accsBail, accsSalary, groupStatistics, appAtta, getSubs } from '../../../common/api.js';
export default {
	data() {
		return {
			current: 0,
			info: null,
			id: null,
			bail: null,
			salary: null,
			statistics: null,
			atta: null,
			subs: null,
			nav: [{ name: '建设单位' }, { name: '勘察单位' }, { name: '总包单位' }, { name: '监理单位' }, { name: '设计单位' }]
		};
	},
	onLoad(e) {
		this.id = e.id;
		getProjectDetail({
			id: e.id
		}).then(e => {
			this.info = e.data;
			// console.log(this.info)
			this.getSubs(); // 分包单位
			this.accsBail(); // 保证金专户
			this.accsSalary(); // 工资专户
			this.groupStatistics(); // 班组统计
			this.appAtta(); // 附件
		});
	},
	methods: {
		getSubs() {
			getSubs({
				params: {
					gcbh: this.id,
					pageNum: 1,
					pageSize: 100
				}
			}).then(e => {
				this.subs = e.data;
				if (this.subs.length > 0) {
					this.nav.push({ name: '分包单位' });
				}
			});
		},
		accsBail() {
			// 保证金专户
			accsBail({
				params: {
					gcbh: this.id
				}
			}).then(e => {
				// console.log('保证金专户',e.data)
				this.bail = e.data;
			});
		},
		accsSalary() {
			// 工资专户
			accsSalary({
				params: {
					gcbh: this.id
				}
			}).then(e => {
				// console.log('工资专户',e.data)
				this.salary = e.data;
			});
		},
		groupStatistics() {
			// 班组统计
			groupStatistics({
				params: {
					gcbh: this.id
				}
			}).then(e => {
				this.statistics = e.data;
			});
		},
		appAtta() {
			// 附件
			appAtta({
				params: {
					ywlx: 'salary_xmgl_xmdtgc',
					ywbh: this.id
				}
			}).then(e => {
				this.atta = e.data;
			});
		},
		viewImage(item) {
			if (!item.attachList || item.attachList.length <= 0) {
				return uni.$u.toast('暂无可查看附件');
			}
			uni.previewImage({
				urls: item.attachList.map(e => {
					return e.attachUrl;
				})
			});
		},
		enterpriseDetail(current, id) {
			if (id && id != '未录入数据') {
				uni.$u.route({
					url: '/pages/index/app/enterpriseDetail',
					params: {
						id: id,
						current: current
					}
				});
			} else {
				return uni.$u.toast('暂无详细数据');
			}
		},
		appTeam() {
			uni.$u.route({
				url: '/pages/index/app/appTeam',
				params: {
					gcbh: this.id
				}
			});
		}
	}
};
</script>

<style lang="scss">
.body {
	height: calc(100vh - 44px);
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.table {
		font-size: 28rpx;
		display: table;
		width: 100%;
		vertical-align: middle;
		border: 1px solid #f6f7f8;
		.tr {
			display: table-row;
			.th,
			.td {
				display: table-cell;
				height: 80rpx;
				vertical-align: middle;
			}
			.th {
				font-weight: bold;
				color: #162233;
			}
			&:nth-child(2n-1) {
				background-color: #f6f7f8;
			}
		}
	}
}
page {
	background-color: #fbfcfc;
}
</style>
